<template>
  <div class="layout">
    <header class="header">
      <div class="header-index">
        <div class="logo">
          <img src="./../assets/logo.svg" alt="海淘国际" />
        </div>
        <nav class="nav">
          <router-link to="/home">首页</router-link>
          <router-link to="/virtual">虚拟卡</router-link>
          <router-link to="/wallet">钱包</router-link>
          <router-link to="/money">资金划拨</router-link>
          <router-link to="/vip">VIP会员</router-link>
          <router-link to="/notice">公告</router-link>
          <el-dropdown placement="bottom">
            <router-link to="/user">个人中心</router-link>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  ><router-link to="/test"
                    >测试页面</router-link
                  ></el-dropdown-item
                >
                <el-dropdown-item>The Action 2st</el-dropdown-item>
                <el-dropdown-item>The Action 3st</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </nav>
        <el-dropdown placement="bottom">
          <div class="user-info">
            <el-icon :size="'1.5rem'"><User /></el-icon>
            <span class="user-name">Jack</span>
            <el-icon><ArrowDown /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <div class="user-id">ID:123456789</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/user">个人中心</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/real-name">用户信息</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/user-set">账户设置</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
               <div class="no-login">退出登录</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>

    <main class="main">
      <router-view></router-view>
    </main>

    <footer class="footer">
      <p>
        COPYRIGHT©2022-2024 本平台内所有内容均为海淘国际平台版权所有
        京ICP备2024018068号
      </p>
    </footer>
  </div>
</template>

<script setup>
</script>
<style scoped lang="less">
.layout {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.header {
  background: #000;
  flex-shrink: 0;
  color: white;
  height: 5rem;
  box-sizing: border-box;
  .header-index {
    height: 100%;
    width: 80rem;
    // background: #fcf;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
  }
}

.logo img {
  width: 7.5rem;
}

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.nav a{
  color: white;
  text-decoration: none;
  vertical-align: middle;
}
a{
  color: #000;
  text-decoration: none;
  vertical-align: middle;
}
a.router-link-active{
color: #CEA975;
}
.nav a.router-link-active {
  color: #CEA975;
}

.main {
  flex: 1;
  box-sizing: border-box;
  background: #f3f3f3;
  width: 100vw;
  // width: 80rem;
  margin: auto;
  overflow-y: auto;
}

.footer {
  flex-shrink: 0;
  background: #000;
  color: white;
  text-align: center;
  padding: 1rem;
  box-sizing: border-box;
}
.user-info {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1rem;
  .user-name {
    margin: 0 1.5rem;
  }
}
.no-login{
  margin: 1rem 0;
  text-align: center;
  width: 100%;
  color: #000;
}
</style> 